<!-- 调拨单列表 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="layout">
      <u-scroll-list :indicator="false" class="p-b-0">
        <view class="top-view p-t-20">
          <view class="flex flex-sa f-35 m-b-10">
            <view class="f-35">
              <view class="flex flex-c f-32 text-color"> 总匹数 </view>
              <view class="flex flex-c f-30 m-b-10"> {{ footerTotal.piecesCount || 0 }} </view>
            </view>
            <view class="f-35">
              <view class="flex flex-c f-32 text-color"> 总数量 </view>
              <view class="flex flex-c f-30 m-b-10"> {{ footerTotal.quantity || 0 }} </view>
            </view>
          </view>
        </view>
      </u-scroll-list>
      <u-sticky offset-top="0">
        <c-time @success="timeSuccess">
          <view class="flex s-content" slot="content">
            <!-- <view class="check-account flex flex-dlii  select-item"
              @click="goRoute(billId.data.name, 1, 'pages/application/pages/cloth/sales-statistics/product-index')"
              :class="{ 'marginLeft': !haspage }">
              <text class="grey p-r-10">{{ billId.data.name || '调入' }}</text>
              <u-icon v-if="!billId.data.name" name="arrow-down-fill" color="#ccc" size="10"></u-icon>
              <text class="c-99" v-else>x</text>

            </view>
            <view class="check-account flex flex-dlii select-item"
              @click="goRoute(billId.data.keywords, 2, 'pages/application/pages/cloth/sales-ticket/index?page=return&type=return')">
              <text class="grey p-r-10">{{ billId.data.keywords || '调出' }}</text>
              <u-icon v-if="!billId.data.keywords" name="arrow-down-fill" color="#ccc" size="10"></u-icon>
              <text class="c-99" v-else>x</text>
            </view> -->
          </view>
        </c-time>
      </u-sticky>
      <view class="list-view" @click="detail(item)" v-for="(item, index) in indexList" :key="index">
        <view class="dl-view">
          <view class="dt-view flex">
            <view class="name">
              {{ item.storeNameIn }}
            </view>
            <view class="user flex">
              <text class="grey m-r-10">{{ item.businessTime }}</text>
              <text class="grey m-r-10">管理员</text>
              <view class="status">{{ item.auditState ? '已审核' : '未审核' }}</view>
            </view>
          </view>
          <view class="dd-view flex">
            <view class="all-view">
              <text class="grey m-r-10">共</text><text>{{ item.piecesCount }}匹</text><text>{{ item.quantity
              }}米</text>
            </view>
            <!-- <view class="pay-view">
              <text class="grey m-r-10">应收</text>
              <text class="red">￥{{ item.totalPrice }}</text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="fixed-btn border-top">
        <view class="btn-con flex">
          <u-button type="primary"
            @click="goRouteDocument('/pages/application/pages/cloth/sales-ticket/index?type=khdd&page=khdd')"
            shape="circle" text="新增调拨单"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import cTime from '@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue'
import { getlist } from "@/apis/bill/dispatch";
export default {
  name: '',
  components: {
    cTime
  },
  data() {
    return {
      config: {
        title: "调拨单",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      haspage: true,
      pages: {
        current: 1,
        size: 20,
      },
      billId: {
        data: {
          "isCancel": false,
          "bBeginTime": null, // 开始事件
          "bEndTime": null, // 结束时间
          "keywords": "", // 客户
          "spuId": "", //产品spuId
          "code": "",//产品code
          "name": "",//name
          comegoId: "",
          comegoName: "",
        },
        page: {
          current: 1,
          size: 20,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "business_time",
              asc: false,
            },
          ],
        },
      },
      footerTotal: {
        "piecesCount": 0,
        "quantity": 0,
      },
      indexList: [],
    }
  },
  onLoad(info) {
    this.initData()
    // 产品 
    uni.$on('salesStatisticsProduct', data => {
      this.billId.data.name = data.name
      this.billId.data.code = data.code
      this.billId.data.spuId = data.spuId
      this.indexList = []
      this.initData()
    })
    // 客户
    uni.$on('on-sales-ticket', data => {
      this.billId.data.comegoId = data.id
      this.billId.data.comegoName = data.name
      this.indexList = []
      this.initData()
    })
  },
  onShow() {


  },
  beforeDestroy() {
    uni.$off('salesStatisticsProduct')
    uni.$off('on-sales-ticket')
  },
  methods: {
    // 查看详情
    detail(item) {
      this.$ls.remove('xsdInformation')
      this.$ls.remove('cgdInformation')
      this.$ls.remove('thjsInformation')
      this.$ls.remove('dbdInformation')
      uni.redirectTo({
          url: `/pages/application/pages/cloth/procure/settlement/transfer-order?id=${item.id}&type=details`
        })

    },
    // 跳转到销售单和退货单
    goRouteDocument(item) {
      if (!item) {
        this.$refs.uToast.show({
          type: 'default',
          message: '正在开发中',
        })
        return
      }
      // 先清除在产页面等
      this.$ls.remove('xsdInformation')
      this.$ls.remove('cgdInformation')
      this.$ls.remove('thjsInformation')
      this.$ls.remove('khddInformation')
      this.$Router.push({
        path: item,
      });
    },
    // 路由跳转
    goRoute(item, index, url) {
      if (item) {
        if (index == 1) {
          this.billId.data.name = ''
          this.billId.data.code = ''
          this.billId.data.spuId = ''
        } else if (index == 2) {
          this.billId.data.keywords = ''
        }
        this.indexList = []
        this.initData()
      } else {
        uni.navigateTo({
          url: url
        })
      }

    },
    // 获取时间参数
    timeSuccess(val, item) {
      console.log("timeSuccess", val, item);
      this.billId.page.current = 1;
      this.indexList = []
      this.billId.data.bBeginTime = val[0];
      this.billId.data.bEndTime = val[1];
      this.initData()

    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      getlist(this.billId).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.footerTotal = data.totalList
        if (this.pages.current == 1) {
          this.indexList = data.page.records;
        } else {
          this.indexList = [...data.page.records, ...this.indexList];
        }
      });
    },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.top-view {
  flex: 1;
  background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
  color: #fff;
}

.s-content {
  flex: 1;
  justify-content: space-between;
  // padding-left: 20%;
  padding-right: 10rpx;
}

.border-top {
  border-top: 1rpx solid #ddd;
}

.list-view {
  padding: 10rpx 20rpx;

  .dl-view {
    background-color: #fff;
    box-shadow: 4rpx 4rpx 10rpx #ddd;
    border-radius: 10rpx;
    padding: 30rpx 20rpx;

    .dt-view {
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .name {
        font-size: 30rpx;
        font-weight: 700;
      }

      .user {
        font-size: 24rpx;
        align-items: center;
      }

      .status {
        background-color: #eee;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
      }
    }

    .dd-view {
      justify-content: space-between;
      font-size: 24rpx;
    }
  }
}

.marginLeft {
  margin-left: 20%;
}
</style>